<%--
  Created by IntelliJ IDEA.
  User: 檬zhu
  Date: 2021/12/15
  Time: 23:33
  To change this template use File | Settings | File Templates.
--%>
<%@page import="java.util.List" %>
<%@ page import="com.example.ordersystem.domain.Dish" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">

    <style type="text/css">
        fieldset {
            width: 500px;
            padding: 20px;
            margin: 30px 30px 30px 150px;
            border: 1px solid #ccc;
        }

        .submit {
            background: #0099CC;
            opacity: 0.7;
            text-align: center;
            border-radius: 10px;
            color: #fff;
            font-size: 16px;
            width: 120px;
            height: 30px;
        }

        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<jsp:include page="title.jsp"/>
<!-- 上传菜品的图片 -->
<form method="post" action="${pageContext.request.contextPath}/merchant/uploadDishPicture" enctype="multipart/form-data">

    <fieldset>
        <legend>菜品图片</legend>
        <%
            Object obj = session.getAttribute("add");
        %>
        <input style="border-radius: 4px; border: 1px solid #ccc; background-color: #aaa;"
               type="file" name="file" accept=image/* title="选择商品照片"/>
        <%if (obj == null) {%>
            <img src="" alt="图片">
        <%}
        else {%>
            <img alt="" src="<%=((Dish) obj).getDisplayPicture()%>">
        <%}%>
        <input type="submit" value="上传" class="submit"
               style="margin-left: 500px;">
    </fieldset>
</form>
<!--上传商品的其他信息-->
<form action="${pageContext.request.contextPath}/merchant/addDishDetail" method="get" class="layui-form">
    <!-- 商品所属类别 -->
    <fieldset>
        <div class="layui-form-item" style="width: 50%">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-block">
                <select name="categoryNum" lay-verify="required">
                    <%
                        @SuppressWarnings("unchecked")
                        List<String> categories = (List<String>) request.getAttribute("categories");
                        for (int i = 0; i < categories.size(); ++i) {//显示所有商品的分类，value取编号,从1开始
                            System.out.println(categories.get(i));
                    %>
                    <option value="<%=i+1%>"><%=categories.get(i)%>
                    </option>
                    <%
                        }
                    %>
                </select>
            </div>
        </div>

        <!--菜品名称-->
        <div class="layui-form-item">
            <label class="layui-form-label">菜品</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required"
                       placeholder="请输入菜品名称" autocomplete="off" class="layui-input" style="width: 39%">
            </div>
        </div>

         <!--菜品价格-->
        <div class="layui-form-item">
            <label class="layui-form-label">价格￥</label>
            <div class="layui-input-block">
                <input type="text" name="price" id="price" required
                       placeholder="请输入菜品价格" autocomplete="off" class="layui-input" style="width: 39%">
            </div>
        </div>
        <!--菜品描述-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">菜品描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea">Ta很懒，什么也没有留下</textarea>
            </div>
        </div>

        <input type="submit" value="确认添加" class="submit"
               style="margin-left: 500px;" onclick="return inputCheck()">
    </fieldset>
</form>
<script src="../../resources/layui/layui.js"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form, layer = layui.layer, $ = layui.jquery;
    });
</script>
<script>
   function inputCheck() {
       const price = document.getElementById("price").value;
       if (isNaN(price) || price < 0) {
           alert("菜品价格不合法");
           return false;
       }
       else
           return true;
   }
</script>
</body>
</html>
